<template>
  <div id="app">
    <!-- 头部 -->
    <van-row>
      <van-col class="bgtitle" span="24">
        <span v-if="$route.path !== '/home'" @click="$router.back()">返回</span>
        黑马程序.Vant
        <span v-if="$route.path =='/search'" @click="$router.push('/add')" class="add">添加</span>
      </van-col>
    </van-row>
    <!-- 主体 -->
    <van-row>
      <router-view></router-view>
    </van-row>
    <!-- 底部 -->
    <van-row>
      <van-tabbar router>
      <van-tabbar-item icon="wap-home" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="friends">会员</van-tabbar-item>
      <van-tabbar-item icon="cart" info="5" @click="JumpCar" to="/car">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to='/search'>搜索</van-tabbar-item>
    </van-tabbar>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
},
 methods: {
    JumpCar() {
      this.$router.push('/car')
    }
  }
}
</script>
<style lang="less" scoped>
*{
  margin: 0px;
  padding: 0px;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
.bgtitle {
  background-color: #1989fa;
  color: #fff;
  font-size: 14px;
  height:40px;
  text-align: center;
  line-height: 40px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  span {
    float:left;
    margin-left:20px;
  }
  .add{
    float: right;
    margin-right:20px;

  }
}

</style>
